<template>
  <div>
    <!-- 新增点位 -->
    <el-dialog
      class="dialog"
      :title="title"
      :visible="dialogPartner"
      width="45%"
      @close="closeDialog"
      @open="openDialog"
    >
      <el-form
        ref="PartnerRef"
        label-width="120px"
        :model="PartnerForm"
        :rules="PartnerRules"
      >
        <el-form-item label="合作商名称:" prop="name">
          <el-input
            v-model="PartnerForm.name"
            type="text"
            placeholder="请输入"
            maxlength="10"
            show-word-limit
            style="width: 80%"
          />
        </el-form-item>
        <el-form-item label="联系人:" prop="contact">
          <el-input
            v-model="PartnerForm.contact"
            type="text"
            placeholder="请输入"
            maxlength="10"
            show-word-limit
            style="width: 80%"
          />
        </el-form-item>
        <el-form-item label="联系电话:" prop="mobile">
          <el-input
            v-model="PartnerForm.mobile"
            type="text"
            placeholder="请输入"
            maxlength="11"
            show-word-limit
            style="width: 80%"
          />
        </el-form-item>
        <el-form-item label="分成比例(%):" prop="ratio">
          <el-input-number
            v-model="PartnerForm.ratio"
            style="width: 80%"
            controls-position="right"
            :min="1"
            :max="100"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item v-if="!PartnerForm.id" label="账号:" prop="account">
          <el-input
            v-model="PartnerForm.account"
            type="text"
            placeholder="请输入"
            maxlength="18"
            show-word-limit
            style="width: 80%"
          />
        </el-form-item>
        <el-form-item v-if="!PartnerForm.id" prop="password" label="密码">
          <el-input
            v-model="PartnerForm.password"
            type="text"
            placeholder="请输入"
            maxlength="20"
            show-word-limit
            style="width: 80%"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="closeDialog">取 消</el-button>
        <el-button
          type="primary"
          class="sure"
          @click="dialogNodeFn"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addPartner, updataPartner } from '@/api/node'
export default {
  props: {
    dialogPartner: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      PartnerForm: {
        name: '', // 合作商名称
        contact: '', // 联系人
        mobile: '', // 联系电话
        ratio: '', // 分成比例
        account: '', // 账号
        password: ''// 密码
      },
      PartnerRules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入', trigger: 'blur' },
          { pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, message: '请输入正确号码', trigger: 'blur' }],
        ratio: [{ required: true, message: '请输入', trigger: 'blur' }],
        account: [{ required: true, message: '请输入', trigger: 'blur' }],
        password: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title() {
      return this.PartnerForm.id ? '修改合作商' : '新增合作商'
    }
  },
  methods: {
    // 1.表单关闭
    closeDialog() {
      this.PartnerForm = {
        name: '', // 合作商名称
        contact: '', // 联系人
        mobile: '', // 联系电话
        ratio: '', // 分成比例
        account: '', // 账号
        password: ''// 密码
      }
      this.$refs.PartnerRef.resetFields()
      //   this.item = {}
      this.$emit('PartnerDialog')
    },
    // 1.2表单打开
    openDialog() {
      if (this.item) {
        this.PartnerForm = this.item
      }
    },
    // 2.新增合作商表单提交
    dialogNodeFn() {
      this.$refs.PartnerRef.validate(async(isOk) => {
        if (!isOk) return
        if (this.PartnerForm.id) {
          await updataPartner(this.PartnerForm)
        } else {
          await addPartner(this.PartnerForm)
        }

        this.$emit('addPartner')
      })
    }
  }
}
</script>

<style></style>
